<!--能耗用电点位详情展示-->
<template>
    <div class="monitorC">
        <div class="monitorC_title">
            <span>监控面板</span>
        </div>
        <div class=" monitorC_bgcBox">
            <div class="monitorC_bgcBox_line"></div>
            <!--           -->
            <div v-if="monitorData.length>0">
                <div class="monitorC_bgcBox_designation">
                    <div>点位名称：{{targetData.deviceName }}</div>
                    <div>位置：{{ targetData.location}}</div>
                </div>
                <div class="monitorC_bgcBox_table">
                    <div class="monitorC_bgcBox_table_header">
                        <div style="width: 20%">监测值</div>
                        <div style="width: 20%">单位</div>
                        <div style="width: 25%">上报时间</div>
                    </div>
                    <div class="monitorC_bgcBox_table_subject userFlex">
                        <div class="monitorC_bgcBox_table_subject_row" v-for="(item,i) in monitorData" :key="i">
                            <div style="width: 20%">{{ item.value }}</div>
                            <div style="width: 20%">{{ item.key.match(/\((.*?)\)/)[1]}}</div>
                            <div style="width: 25%">{{ item.createTime }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-else class="monitorC_bgcBox_noData">
                <LoadingSpinner v-if="isLoading"/>
            </div>
        </div>
        <div class="monitorC_close" @click="$emit('showViewViedo', false, '')"></div>
    </div>
</template>

<script>
import {getElectricity, getElectricitys} from "@/api/consumption/axios";
import {getDeviceData} from "@/api/area";
import LoadingSpinner from '@/components/loadingSpinner.vue';

export default {
    name: "detailsPage",
    props: {
        electricityId: String
    },
    components:{
        LoadingSpinner
    },
    data() {
        return {
            showMonitor: true, //显示隐藏弹窗
            //安全应急类型
            monitorData: [],
            responseData: [],
            targetDeviceId: [],
            targetData:[],
            isLoading: true
        }
    },
    mounted() {
        this.getElectr()
        // setTimeout(() => {
        //     this.isLoading = false;
        // }, 3000);
    },

    methods: {
        //能耗点位生成
        getElectr() {
            let params = {
                'start': '0',
                'count': '10',
                'id': this.electricityId
                // 'id': 'a276fb19-9f8c-4dff-b7f9-9a690d6fc377'
            }
            getElectricitys(params).then(res => {
                const electricity = res.value.value
                this.targetDeviceId = res.value.value[0].iocId
                console.log(this.targetDeviceId, '能耗点位生成========>')
                // 遍历后端返回的数据，获取 createTime、key 和 value
                for (const key in electricity) {
                    const dataItem = electricity[key];
                    const createTime = dataItem.createTime;
                    const keyName = dataItem.value[3].key;
                    const value = dataItem.value[3].value;

                    // 将 createTime、key 和 value 组成一个新的对象，并添加到新的数组中
                    this.monitorData.push({
                        createTime: createTime,
                        key: keyName,
                        value: value,
                    });
                }
                this.getShe()
                this.isLoading = false
            })
        },
        getShe() {
            getDeviceData().then(res => {
                this.responseData = res.data.data
                this.targetData = this.responseData.find(item => item.deviceId === this.targetDeviceId);
                console.log(this.targetData,'能耗点位生成11111')
            })
        }

    }

}
</script>

<style lang="scss" scoped>
.monitorC {
  position: relative;
  width: 662px;
  height: 440px;
  display: flex;
  overflow: hidden;
  background-size: 100% 100%;
  background-image: url("@/assets/news/bg_news.png");
  flex-direction: column;

  .ws-player {
    width: 95%;
    height: 82%;
    margin-left: 2.5%;
    margin-top: 1.5%;
  }

  &_bgcBox {
    width: 600px;
    height: 350px;
    margin: 0 auto;

    &_noData {
      width: 600px;
      height: 320px;
      text-align: center;
      line-height: 320px;
      font-size: 15px;
      color: #999;
    }

    &_line {
      width: 600px;
      height: 1px;
      background-color: #467eb9;
      margin: 10px 0;
    }

    &_designation {
      width: 590px;
      height: 30px;
      display: flex;
      justify-content: space-between;
      font-size: 13px;
      font-family: Source Han Sans SC;
      font-weight: bold;
      color: #FFFFFF;

      margin: 0 auto;
      line-height: 30px;

      &_online {
        width: 50px;
        height: 28px;
        text-align: center;
        line-height: 30px;
        color: #d8d83d;
        border: 1px solid #d8d83d;
        border-radius: 4px;
      }
    }

    &_table {
      width: 600px;
      height: 320px;
      font-size: 13px;
      font-family: Source Han Sans SC;
      font-weight: bold;
      color: #FFFFFF;

      &_header {
        width: 100%;
        height: 30px;
        line-height: 30px;
        display: flex;
        justify-content: space-between;
        background: rgba(98, 183, 255, 0.2);
        text-align: center;
        margin: 10px 0;
      }

      &_subject {
        width: 100%;
        height: 260px;
        font-size: 12px;
        font-family: Source Han Sans SC;
        text-align: center;

        &_row {
          width: 100%;
          height: 25px;
          text-align: center;
          display: flex;
          justify-content: space-between;
          line-height: 25px;
        }

      }
    }

  }

  &_title {
    margin-left: 22px;
    width: 216px;
    height: 24px;
    margin-top: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-size: 100% 100%;
    background-image: url("@/assets/bg_title1.png");

    span {
      height: 24px;
      font-size: 13px;
      font-family: Source Han Sans SC;
      font-weight: bold;
      color: #FFFFFF;
      margin-left: 11px;
      line-height: 24px;
      background: linear-gradient(0deg, #90CCFF 0%, #FAFAFB 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }


  &_close {
    position: absolute;
    right: 20px;
    cursor: pointer;
    top: 30px;
    width: 23px;
    height: 22px;
    background-size: 100% 100%;
    background-image: url("@/assets/news/icon_closenews.png");
  }

  .videoStyle {
    position: absolute;
    margin-top: 20px;
    width: 560px;
    height: 260px;
    margin-top: 60px;
    margin-left: 50px;
    max-height: 300px;
  }
}

.userFlex {
  scrollbar-width: none;
  /* firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
  overflow-y: auto;
}

.userFlex::-webkit-scrollbar {
  display: none;
  /* Chrome Safari */
}

</style>